<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-05-30 11:29:27
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-09-09 13:41:40
 * @FilePath: /XMate-h5/src/views/minutes/components/transfer/configAIAsrPanel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <van-popup
    v-bind="$attrs"
    round
    safe-area-inset-bottom
    position="bottom"
    teleport="#minutesPage"
    :style="{ height: '220px' }"
  >
    <h4>AI字幕改写</h4>
    <div class="content">
      <van-row align="center">
        <van-switch v-model="enableAsrOptimize" active-color="#436BFF" />
        <p class="btn-title">AI字幕改写</p>
      </van-row>
      <p class="des">在保留原文的要点内容基础上，将原文内容进行精简和改写</p>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useMinutesStore } from "@/store/modules/minutes/minutes";

const minutesStore = useMinutesStore();

const enableAsrOptimize = computed({
  set(v: boolean) {
    minutesStore.enableAsrOptimize = v;
  },
  get() {
    return minutesStore.enableAsrOptimize;
  },
});
</script>

<style lang="less" scoped>
h4 {
  // margin: auto;
  // background-color: red;
  text-align: center;
  margin-top: 12px;
}
.content {
  padding-left: 24px;
}
.btn-title {
  font-weight: 500;
  font-size: 14px;
  color: #262626;
  line-height: 24px;
  margin-left: 16px;
}

.des {
  font-weight: 400;
  font-size: 14px;
  color: #8c8c8c;
  line-height: 24px;
  margin-top: 12px;
}
</style>
